/**
参考网址：https://blog.csdn.net/qq_36410795/article/details/119205448
vue LineString 实现地图轨迹路线，设置起点和终点的标注信息详解
*/


<template>
    <div id="content">
        <div id="map" ref="map"/>
    </div>
</template>

<script>
    import "ol/ol.css";
    import {Map, Feature} from "ol";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector";
    import VectorSource from "ol/source/Vector";
    import {Style, Stroke, Icon} from "ol/style";
    import {LineString, Point, Polygon} from "ol/geom";
    import XYZ from "ol/source/XYZ";
    // 一段经纬度数据
    import trackCar from "./track-car.json";

    export default {
        data() {
            return {
                map: null,
                vectorLayer: null,
            };
        },
        mounted() {
            this.addTrack(); //创建
            this.initMap(); //初始化地图
        },
        methods: {
            addTrack() {
                // 根据经纬度点位创建线
                var routeFeature = new Feature({
                    type: "route",
                    geometry: new LineString(trackCar).transform("EPSG:4326", "EPSG:3857"),
                });
                // 创建开始图标
                const startMarker = new Feature({
                    type: "startMarker",
                    geometry: new Point(trackCar[0]).transform("EPSG:4326", "EPSG:3857"),
                });
                // 创建结束图标
                const endMarker = new Feature({
                    type: "endMarker",
                    geometry: new Point(trackCar[trackCar.length - 1]).transform(
                        "EPSG:4326",
                        "EPSG:3857"
                    ),
                });
                // 设置样式
                var styles = {
                    // 如果类型是 route 的样式
                    route: new Style({
                        stroke: new Stroke({
                            width: 2, //线的宽度
                            color: "#ffc641", //线的颜色
                        }),
                    }),
                    // 如果类型是 geoMarker 的样式
                    startMarker: new Style({
                        image: new Icon({
                            src: require("@/assets/img/start.png"),
                            anchor: [0.5, 1.1], // 设置偏移
                        }),
                    }),
                    endMarker: new Style({
                        image: new Icon({
                            src: require("@/assets/img/end.png"),
                            anchor: [0.5, 1.1], // 设置偏移
                        }),
                    }),
                };
                // 把小车和线添加到图层
                this.vectorLayer = new VectorLayer({
                    source: new VectorSource({
                        features: [routeFeature, startMarker, endMarker],
                    }), //线,起点的图标,终点的图标
                    style: function (feature) {
                        return styles[feature.get("type")];
                    },
                });
            },
            /**
             * 初始化一个 openlayers 地图
             */
            initMap() {
                const target = "map"; // 跟页面元素的 id 绑定来进行渲染
                const tileLayer = [
                    new TileLayer({
                        source: new XYZ({
                            url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                        }),
                        projection: "EPSG:3857",
                    }),
                    this.vectorLayer, //把线,起点,终点的图标加载到图层
                ];
                this.map = new Map({
                    target: target, // 绑定dom元素进行渲染
                    layers: tileLayer, // 配置地图数据源
                });
                this.map
                    .getView()
                    .fit(new Polygon([trackCar]).transform("EPSG:4326", "EPSG:3857"), {
                        padding: [100, 100, 100, 100],
                    }); //设置地图的缩放距离离屏幕的大小
            },
        },
    };
</script>
<style lang="scss" scoped>
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    /*移除OSM的链接*/
    :deep(.ol-attribution) {
        display: none;
    }
</style>